<template>
  <!-- PlayMode 转账 -->
  <PageContainer>
    <view class="container">
      <Header title="转账" :is-box-shadow="false" />

      <view class="bgf fz-14" v-if="payWay.qrCodeCollectionEnabled">
        <view class="px-15 fw-7 linh-50 borderBottom fz-16">支付方式一:扫码支付</view>
        <view class="px-15 pb-24">
          <view class="fontTC py-15">扫描下方二维码支付</view>
          <view class="disFlx">
            <view style="flex: 1" class="disFlxCC" v-if="payWay.qrCode1">
              <TImage :src="payWay.qrCode1" width="280rpx" height="280rpx" />
              <view class="fz-12 pt-5">{{ payWay.qrCodeName1 }}</view>
            </view>
            <view style="flex: 1" class="disFlxCC" v-if="payWay.qrCode2">
              <TImage :src="payWay.qrCode2" width="280rpx" height="280rpx" />
              <view class="fz-12 pt-5">{{ payWay.qrCodeName2 }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="bgf fz-14 mt-15" v-if="payWay.bankAccountCollectionEnabled">
        <view class="px-15 fw-7 linh-50 borderBottom fz-16">
          支付方式{{ payWay.qrCodeCollectionEnabled ? '二' : '一' }}:对公转账
        </view>
        <view class="px-15">
          <view class="disFlxJS linh-50">
            <view>收款单位</view>
            <view>{{ payWay.collectionUnit }}</view>
          </view>
          <view class="disFlxJS linh-50">
            <view>账号</view>
            <view>{{ payWay.bankAccount }}</view>
          </view>
          <view class="disFlxJS linh-50">
            <view>开户行</view>
            <view>{{ payWay.bankDeposit }}</view>
          </view>
        </view>
      </view>

      <view class="bgf fz-14 mt-15">
        <view class="px-15 fw-7 linh-50 borderBottom fz-16">转账提示</view>
        <view class="px-15 py-10" style="color: #aaabab">
          {{ payWay.remark }}
          <!-- <input v-model="parame.remarks" :placeholder="payWay.remark" style="width:100%;" /> -->
        </view>
      </view>

      <view class="bgf fz-14 mt-15">
        <view class="px-15 fw-7 linh-50 borderBottom fz-16">
          缴费凭证
          <text class="fz-12 pl-10 fw-4" style="color: #aaabab">支持扩展名：.png .jpg...</text>
        </view>
        <view class="px-15">
          <view class="linh-50">缴费后请上传支付凭证，以便工作人员核验。</view>
          <view>
            <FormUploadFile v-model="parame.paymentVoucher" :limit="1" mediaType="image" />
          </view>
        </view>
      </view>

      <TButtonGroup>
        <TButton
          class="gutter-btn"
          text="提交凭证"
          type="primary"
          customClass="br-50"
          @click="submit"
        />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  PlayMode  转账 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { ref, unref } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import FormUploadFile from '@/components/Form/components/upload/FormUploadFile.vue';
  import { getPayConfig, upPaymentVoucher } from '@/api/membership';
  import { type PayWayData } from '@/api/membership/types';
  import { onLoad, navigateBack } from '@/router';
  import { logManager } from '@/utils/log';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { useUserStoreWithOut } from '@/store/modules/user';
  const useUser = useUserStoreWithOut();

  const payWay = ref({} as PayWayData);
  const getPayData = function () {
    getPayConfig().then((res: PayWayData) => {
      payWay.value = res;
    });
  };
  getPayData();

  interface ParameData {
    id: number;
    remarks: string;
    paymentVoucher: string;
  }
  const parame = ref({} as ParameData);

  onLoad<'PlayMode'>((op) => {
    parame.value.id = op.id;
  });

  // 提交凭证
  const submit = async function () {
    try {
      await upPaymentVoucher(unref(parame));
      useUser.openOfficialAccount = true; // 返回弹出关注公众号
      navigateBack();
    } catch (err) {
      logManager.error(err);
    }
  };
</script>

<style lang="scss" scoped></style>
